<template>
  <div class="front-box">
    <div class="front-big">
      <img src="../../../public/class/front/big1.png">
      <img src="../../../public/class/front/big2.png">
    </div>
    <div class="front-small">
      <Small :data="obj.arr"/>
    </div>
  </div>
</template>

<script>
import Small from "./smallimg.vue"
export default {
  components:{
    Small
  },
  data(){
    return{
      obj:{
        arr:[
          {url:"./class/front/quan.jpg",text:"全部"},
          {url:"./class/front/vue.png",text:"Vue.js"},
          {url:"./class/front/ts.png",text:"Typescript"},
          {url:"./class/front/react.png",text:"React.JS"},
          {url:"./class/front/hc.png",text:"HTML/CSS"},
          {url:"./class/front/js.png",text:"JavaScript"},
          {url:"./class/front/angular.jpg",text:"Angular"},
          {url:"./class/front/node.jpg",text:"Node.js"},
          {url:"./class/front/jquery.jpg",text:"jQuery"},
          {url:"./class/front/bts.webp",text:"Bootstrap"},
          {url:"./class/front/sass.png",text:"Sass/Less"},
          {url:"./class/front/web.png",text:"WebApp"},
          {url:"./class/front/xcx.jpg",text:"小程序"},
          {url:"./class/front/gj.jpg",text:"前端工具"},
          {url:"./class/front/css.png",text:"CSS"},
          {url:"./class/front/h5.png",text:"Html5"},
          {url:"./class/front/css.png",text:"CSS3"},
        ]
      }
    }
  }
}
</script>

<style scoped>
.front-box{
  margin-left: 0.9rem;
  width: 2.715rem;
   margin-bottom: 1rem;
  /* background-color: aqua; */
}
.front-big{
  width: 2.435rem;
  margin: auto;
  height: 1.91rem;
  /* background-color: burlywood; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content:space-between;
}
.front-big img{
  width: 2.435rem;
  height: 0.91rem;
}
.front-small{
  width:2.435rem;
  margin: auto;
  /* background-color: chartreuse; */
  display: flex;
  flex-wrap: wrap;
}
</style>